<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        li{
            list-style-type: none;
        }
        .box{
            width: 600px;
            height: 400px;
            margin: 100px auto;
            /* 超出隐藏 */
            overflow: hidden;
            position: relative;
        }
        .box .lunbo{
            position: absolute;
            display: flex;
        }
        .box .lunbo img{
            width: 600px;
            height: 400px;
        }
        .left,.right{
            width: 40px;
            height: 40px;
            background-color: rgba(0, 0, 0, 0.4);
            font-size: 30px;
            color: red;
            text-align: center;
            line-height: 40px;
            position: absolute;
            top: 180px;
            display: none;
        }
        .left{
            left: 10px;
        }
        .right{
            right: 10px;
        }
        ol{
            position: absolute;
            bottom: 20px;
            left: 250px;
            display: flex;
        }
        .box ol li{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: white;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="lunbo">
            <li><img src="./1.png" alt=""></li>
            <li><img src="./2.png" alt=""></li>
            <li><img src="./3.png" alt=""></li>
            <li><img src="./5.jpg" alt=""></li>
            <li><img src="./6.jpg" alt=""></li>
        </ul>
        <span class="left"><</span>
        <span class="right">></span>
        <ol>
            <li style="background-color: red;" index="0"></li>
            <li index="1"></li>
            <li index="2"></li>
            <li index="3"></li>
            <li index="4"></li>
        </ol>
    </div>
</body>
</html>
<script>
    var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var box = document.querySelector('.box');
    var lunbo = document.querySelector('.lunbo');
    //鼠标移入box的时候让左右按钮出现
    box.onmouseenter = function(){
        left.style.display='block'
        right.style.display='block'
        //停止自动轮播
        clearInterval(time)
    }
     //鼠标移出box的时候让左右按钮隐藏
    box.onmouseleave = function(){
        left.style.display='none'
        right.style.display='none'
        //开启自定轮播
        autoLunbo()
    }
    //定义一个全局变量，存放图片的下标
    var num = 0;
    right.onclick=function(){
        num++;
        if(num==5){
            num=0
        }
        //让轮播图结构去到对应下标的位置
        lunbo.style.left=(-600*num)+'px';
        //num改变，需要让下面小圆圈对应下标的样式对应发生改变把num当成实参传递过去
        change(num)
    }
    left.onclick=function(){
        num--;
        if(num<0){
            num=4
        }
        lunbo.style.left=-(600*num)+'px';
        change(num)
    }
    //定义一个全局变量存放定时器
    var time;
    //自动轮播
    function autoLunbo(){
        time = setInterval(function(){
            right.onclick()
        },1000)
    }
    //全局调用自动轮播，目的是一打开页面自动轮播就开始进行
    autoLunbo();

    //点击小圆圈让对应的圆圈背景色变红色，其他不变
    var yuanq = document.querySelectorAll('.box ol li');
    //遍历所有小圆圈，添加点击事件
    for(var i=0;i<yuanq.length;i++){
        yuanq[i].onclick = function(){
            //干掉所有人
            for(var i=0;i<yuanq.length;i++){
                 yuanq[i].style.backgroundColor = 'white'
            }
             //留下自己
        this.style.backgroundColor = 'red';
        //获取当前点击的小圆圈的下标
        var index = this.getAttribute('index');
        //把当前获取到的下标index赋值给全局变量num，目的是让轮播图片的下标时刻与小圆圈的下标保持一致
        num=index;
        //让lunbo去到对应的位置，显示对应的图片
        lunbo.style.left = (-600*index)+'px'
        }
    }
    //图片切换那我们就拿到对应图片的下标，让对应小圆圈的样式发生改变
    function change(index){
        //干掉所有人
        for(var i=0;i<yuanq.length;i++){
            yuanq[i].style.backgroundColor='white'
        }
        yuanq[index].style.backgroundColor='red'
    }
</script>